<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>资金管理</el-breadcrumb-item>
      <el-breadcrumb-item>其它资金确认</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <div style='font-size: 14pt;font-weight:800;display: flex; justify-content: space-between'>
        筛选条件
        <el-button type="info"  icon="el-icon-message" @click="$router.push('/funds/fundshistory')">查看历史申请信息</el-button>
      </div>
      <el-row :gutter="20" style='margin-top: 10px;margin-left: 20px'>
        <!--补贴类型-->
        <el-col :span="10">
          <el-row type='flex' justify='left' align='middle'>
              <h3>资金类型：</h3>
              <el-select v-model="fundType" placeholder="请选择" @change="stateUpdate">
                <el-option
                  v-for="(item, index) in fundOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-row>
        </el-col>
        <!--日期范围-->
        <!-- <el-col :span="9">
          <el-row>
            <el-col :span="4">
              <div style='font-weight: bold;margin-top: 10px;font-size: 10pt'>日期范围：</div>
            </el-col>
            <el-col :span="20">
              <el-date-picker
                v-model="dateRange"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-col>
          </el-row>
        </el-col> -->
        <!--搜索按钮-->
        <el-col :span="4">
          <el-button type="primary" @click="getFundList" v-show='false'>查询结果</el-button>
<!--          <el-button type="danger" @click="clearSearch">清除筛选</el-button>-->
        </el-col>
      </el-row>

      <div style='font-size: 12pt; margin-top:25px;' v-show="false">
        <h3>查询结果</h3>
        <el-tag :type="tagType" v-if="tagVisable" ref="tagRef">{{fundMsg}}</el-tag>
      </div>

      <div style='font-size: 12pt; margin-top:25px' >
        <h3>发起申请</h3>
        <el-row type="flex" justify='space-between'>
          <el-col :span="10">
            <el-alert v-if="applyState === 0" title="可以发起新的申请" type="success" center show-icon :closable="false"></el-alert>
            <el-alert v-else :title="existTip" type="warning" center show-icon :closable="false"></el-alert>
          </el-col>
          <el-col :span="10">
            <el-button type="primary" :disabled="applyBtnState" @click="applyClickFn">发起申请</el-button>
          </el-col>
        </el-row>

      </div>
    </el-card>

    <!--   确认资金弹窗   -->
    <el-dialog title="申请信息填写" :visible.sync="confirmDialogVisible" width="30%">
      <el-form :model="applyForm" :rules="applyFormRules" ref="applyFormRef" label-width="120px">
        <el-form-item label="申请金额:" prop="zjje">
          <el-input v-model="applyForm.zjje"></el-input>
        </el-form-item>
        <el-form-item label="录入人:" prop="lxr">
          <el-input v-model='applyForm.lxr'></el-input>
        </el-form-item>
        <el-form-item label="联系电话:" prop="lxdh">
          <el-input v-model='applyForm.lxdh'></el-input>
        </el-form-item>
        <el-form-item label="单位账号:">
          <el-input :value='applyForm.gjjzh' disabled></el-input>
        </el-form-item>
        <el-form-item label="单位名称:">
          <el-input :value='applyForm.dwmc' disabled></el-input>
        </el-form-item>
        <el-form-item label="申请类型:">
          <el-input :value='fundType' disabled></el-input>
        </el-form-item>
        <el-form-item label="申请时间:">
          <el-input :value='dateRange' disabled></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="confirmDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmApply">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data() {
    return {
      //公司账号
      gjjzh: '',
      //确认资金弹窗标志
      confirmDialogVisible: false,
      // 查询的补贴类型
      fundType: '售房款',
      // 补贴类型列表
      fundOptions: [
        {
          value: '售房款',
          label: '售房款'
        }, {
          value: '维修基金',
          label: '维修基金'
        }
      ],
      // 日期范围
      dateRange: '',
      // 控制资金按钮显示隐藏
      tagVisable: false,
      // 资金详细信息对象
      fundDetailInfo: {},
      // 资金tag标签类型
      tagType: 'primary',
      // 发起申请状态
      applyState: 3,
      // 申请状态对应的通知信息
      applyNotify: '',
      // 申请按钮状态
      applyBtnState: false,
      // 金额
      amount: 0,
      // 查询结果显示框内容
      fundMsg: '',
      // 申请信息填写
      applyForm: {
        dwmc: sessionStorage.getItem('dwmc'),
        gjjzh: sessionStorage.getItem('gjjzh'),
        sqtype: '',
        lxdh: sessionStorage.getItem('phoneNumber'),
        lxr: sessionStorage.getItem('realname'),
        zjje: 0
      },
      applyFormRules: {
        zjje: [
          { required: true, message: '要确认的资金金额不能为空', trigger: 'blur' },
          { pattern: /^([1-9]\d{0,9}|0)(\.\d{1,2})?$/, message: '金额设置非法', trigger: 'blur' }
        ],
        lxr: [
          { required: true, message: '录入人不能为空', trigger: 'blur' },
        ],
        lxdh: [
          { required: true, message: '联系电话不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机联系方式', trigger: 'blur' }
        ]
      },
      // 对应资金存在时的文字提示
      existTip: ''
    }
  },
  async created() {
    this.gjjzh = window.sessionStorage.getItem('gjjzh')
    this.gjjzh = window.sessionStorage.getItem('gjjzh')
    this.getCurrentTime()
    this.getFundState()
    // this.getFundList()
  },
  // 此时，页面上的元素，已经被渲染完毕了！
  methods: {
    // 获取对应资金类型状态
   async getFundState() {
      // 获取是否能发起申请的信息,申请状态码
      const { data: res } = await this.$http.get('/qtzj/fetchApplyStatus',{ params: {sqtype: this.fundType, gjjzh: this.gjjzh }})
      this.applyState = res.data
      console.log('money',res)
      if (this.applyState === 0) {
        this.applyBtnState = false
      } else {
        // 1/2/3都不允许发起补贴,禁用按钮,1-有正在发起的申请，2-申请被驳回修改后重新提交，3-当天已经提交有效申请，请改天再提交(同意、拒绝)
        switch (this.applyState) {
          case 1:
            this.existTip = '当前有正在发起的' + this.fundType + '申请'
            break
          case 2:
            this.existTip = '当前资金类型的申请被驳回，请修改后重新提交'
            break
          case 3:
            this.existTip = '当天已经提交有效申请，请改天再提交'
        }
        this.applyBtnState = true
      }
    },
    // 获取资金列表
    async getFundList() {
      if (this.fundType === '') return this.$message.error('请选择资金类型')
      // const dateFormat = this.dateRange.getFullYear() + '-' + (this.dateRange.getMonth() + 1 + '').padStart(2,'0') + '-' +  (this.dateRange.getDate() + '').padStart(2,'0')
      const { data: res } = await this.$http.get('/qtzj/findQtzjYuE', { params: {
          gjjzh: this.gjjzh ,
          // localDate: this.dateRange,
          zjly: this.fundType
        }})
      if( res.code !== 200) {
        this.existTip = this.fundType + '类型不可发起申请'
        return this.$message.error('未查询到相应信息')
      }
      this.tagVisable =true
      this.fundDetailInfo = res.data
      this.amount = res.data.amount
      this.fundMsg = this.fundType + '资金余额：' + this.amount + ' 元'
      // 最新需求要求隐藏查询剩余金额的那一部分，同时申请表单的金额自由填写
      // this.applyForm.zjje = this.amount

      // 点击查询时，触发当前资金状态
      this.getFundState()
      console.log(123,res)
    },
    // 展示该资金的详细信息
    showConfirmDialog() {
      this.confirmDialogVisible = true
    },
    confirmFunds: function() {
      this.tagType = 'success'
      this.$message.success('确认成功！')
      this.confirmDialogVisible = false;
    },
    // 清空搜索项
    clearSearch() {
      this.fundType = ''
      this.tagVisable = false
    },
    //获取当前时间
    getCurrentTime() {
      var nowDate = new Date();
      var date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        day: nowDate.getDate(),
      }
      this.dateRange = date.year + '-' + (date.month >= 10 ? date.month : '0' + date.month) + '-' + (date.day >= 10 ? date.day : '0' + date.day)
    },
    // 发起申请点击事件
    applyClickFn() {
      if (this.fundType === '') return this.$message.error('请先选择资金类型')
      this.confirmDialogVisible = true
    },
    // 确认申请按钮点击事件
    async confirmApply() {
      this.$refs.applyFormRef.validate(async bool => {
        if (bool) {
          // 表单验证通过
          // 由于剩余金额不显示了，目前申请金额不能超过剩余金额判断也先去除
          // if (this.applyForm.zjje > this.amount || this.applyForm.zjje < 0) return this.$message.warning('申请确认金额不能超过资金余额')
          this.applyForm.sqtype = this.fundType
          const { data: res } = await this.$http.post(`/qtzj/addZjApply?sqrq=${this.dateRange}`, this.applyForm)
          if (res.code !== 200) return this.$message.error(res.msg)
          this.$message.success('申请已成功发起，请耐心等待')
          // 更新页面信息
          this.getFundState()
          this.confirmDialogVisible = false
        } else {
          return this.$message.warning('提交失败，检查信息正确性')
        }

      })
      // console.log('日期',res)
    },
    // 申请弹层关闭事件
    btnCancel() {
     this.$refs.applyFormRef.resetFields()
    },
    // 下拉框每次改变时，查询最新状态
    stateUpdate() {
     this.getFundState()
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-dialog__body {
  padding: 0 20px!important;
}
.el-tag {
  height: 60px;
  //width: 120px;
  line-height: 60px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

/deep/ .el-alert__title {
  font-size: 21px;
  font-weight: bold;
}

/deep/ .el-form-item__label {
  font-size: 18px;
  font-weight: bold;
}

/deep/ .el-input__inner {
  font-size: 16px;
  font-weight: 600;
}

/deep/ .el-form-item__error {
  font-size: 14px;
}
</style>
